<template>
  <div class="btnContent">
    <el-button class="btnList custom-button" :id="`guide_${item.flag}`" @click="handleEvent(item.flag)"
      v-for="(item, index) in btn" v-show="rolesBtnList.includes(item.flag)" :key="index" :plain="item.plain"
      :type="item.type"><span class="icon iconfont">{{ iconfont(item.icon) }}</span>
      {{ item.name }}</el-button>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  components: {},
  computed: {
    ...mapGetters([
      'pageRoles'
    ]),
    rolesBtnList() {
      return this.btnList.filter(flag => this.pageRoles.includes(flag))
    },
  },
  props: {
    btnList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      adminRole:true,
      // icon使用的是iconfont图标
      btn: [
        {
          flag: "add_pl",
          code: "add",
          icon: "&#xe604;",
          type: "primary",
          plain: true,
          name: "批量添加",
        },
        {
          flag: "add",
          code: "add",
          icon: "&#xe604;",
          type: "primary",
          plain: true,
          name: "添加",
        },
        {
          flag: "save",
          code: "save",
          icon: "&#xe604;",
          type: "primary",
          plain: true,
          name: "保存",
        },
        {
          flag: "add_gl",
          code: "add",
          icon: "&#xe604;",
          type: "primary",
          plain: true,
          name: "添加管理批次",
        },
        {
          flag: "add_sc",
          code: "add",
          icon: "&#xe604;",
          type: "primary",
          plain: true,
          name: "添加生产批次",
        },
        {
          flag: "add_yz",
          code: "add",
          icon: "&#xe604;",
          type: "primary",
          plain: true,
          name: "添加养殖批次",
        },
        {
          flag: "edit",
          code: "edit",
          icon: "&#xe60b;",
          type: "success",
          plain: true,
          name: "编辑",
        },
        {
          flag: "funcAuthShow",
          code: "funcAuthShow",
          icon: "&#xe60b;",
          type: "warning",
          plain: true,
          name: "功能权限",
        },
        {
          flag: "delete",
          code: "delete",
          icon: "&#xe61f;",
          type: "info",
          plain: true,
          name: "删除",
        },
        {
          flag: "import",
          code: "import",
          icon: "&#xe62d;",
          type: "warning",
          plain: true,
          name: "导入",
        },
        {
          flag: "export",
          code: "export",
          icon: "&#xe610;",
          type: "warning",
          plain: true,
          name: "导出",
        },
        {
          flag: "downLoad",
          code: "downLoad",
          icon: "&#xe610;",
          type: "warning",
          plain: true,
          name: "下载模板",
        },
        {
          flag: "submitData",
          code: "submit",
          icon: "&#xe610;",
          type: "warning",
          plain: true,
          name: "提交数据",
        },
        {
          flag: "sort",
          code: "sort",
          icon: "&#xe610;",
          type: "warning",
          plain: true,
          name: "排序",
        },
        {
          flag: "menuSort",
          code: "menuSort",
          icon: "&#xe610;",
          type: "warning",
          plain: true,
          name: "列配置",
        },
      ],
    };
  },
  mounted() {
  },
  methods: {
    handleEvent(flag) {
      this.$emit("handleEvent", flag);
    },
    iconfont(icon) {
      const reg = /(&#x)?(.*)/;
      let iconfontName;
      if (reg.test(icon)) {
        iconfontName = reg.exec(icon)[2];
      }
      return String.fromCharCode(parseInt(iconfontName, 16));
    },
  },
};
</script>
<style lang="scss" scoped>
.btnContent {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 48px;
  padding: 0 24px;
  background-color: #ffffff;
  text-align: right;
  border-radius: 5px;

  .btnList,
  .iconfont {
    font-size: 12px;
  }

  .custom-button {
    height: 26px;
    background: #6176D0;
    border-radius: 5px;
    border: 2px solid #5D72CB;
    padding: 0 5px;
    font-size: 16px;
    color: #ffffff;

    &:hover,
    &:active,
    &:focus {
      background: #84889c;
      border-color: #9ea7d0;
      color: #FFF;
    }
  }
}
</style>